<template>
  <div class="wrapper">
    <img class="wrapper__img" src="/i18n/9_16/img/user.png" />
    <div class="wrapper__input">
      <input class="wrapper__input__content" placeholder="请输入手机号码" v-model="username" />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请输入密码"
        v-model="password"
        autocomplete="new-password"
      />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请再次输入密码"
        v-model="againPassword"
        autocomplete="new-password"
      />
    </div>
    <div class="wrapper__register-button" @click="handleRegister">注册</div>
    <div class="wrapper__register__item">
      <div class="wrapper__register__item__link" @click="handleLoginClick">已有账号去登陆</div>
    </div>
    <Toast v-if="show" :message="message" />
  </div>
</template>

<script>
  // 路由跳转方法
  import { useRouter } from 'vue-router'
  import { reactive, toRefs } from 'vue'
  import { post } from '@/utils/request'
  import Toast, { useToastEffect } from '@/components/Toast/Toast'
  // 注册功能的业务逻辑
  const useRegisterEffect = (toastMsg, router) => {
    const data = reactive({
      username: '',
      password: '',
      againPassword: ''
    })
    // 登录按钮
    const handleRegister = async () => {
      try {
        const resultData = await post('/api/user/register', {
          username: data.username,
          password: data.password
        })
        if (resultData?.code === 200) {
          localStorage.isRegister = true
          toastMsg('注册成功，请到登录页面登录！')
          router.push({ name: 'Login' })
        } else {
          toastMsg('注册失败！')
        }
      } catch (e) {
        toastMsg('注册请求失败！')
      }
    }
    const { username, password, againPassword } = toRefs(data)
    return { username, password, againPassword, handleRegister }
  }
  // 跳转登录
  const useLoginEffect = router => {
    const handleLoginClick = () => {
      router.push({ name: 'Login' })
    }
    return { handleLoginClick }
  }

  export default {
    name: 'Register',
    components: { Toast },
    setup() {
      // 获取路由实例
      const router = useRouter()

      const { show, message, toastMsg } = useToastEffect()
      /** *************** 主流程中需要做的事情 *******************/
      const { username, password, againPassword, handleRegister } = useRegisterEffect(
        toastMsg,
        router
      )
      const { handleLoginClick } = useLoginEffect(router)

      return {
        show,
        message,
        username,
        password,
        againPassword,
        handleLoginClick,
        handleRegister
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables';
  .wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    &__img {
      display: block;
      margin: 0 auto 0.4rem auto;
      width: 0.66rem;
      height: 0.66rem;
    }
    &__input {
      // box-sizing: border-box;//内部间距
      height: 0.48rem;
      margin: 0 0.4rem 0.16rem 0.4rem;
      background: #f9f9f9;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.06rem;
      &__content {
        line-height: 0.48rem;
        background: none;
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.16rem;
        color: $content-notice-font-color;
        &::placeholder {
          color: $content-notice-font-color;
        }
      }
    }
    &__register-button {
      line-height: 0.48rem;
      margin: 0.32rem 0.4rem 0.16rem 0.4rem;
      background: $btn-bg-color;
      color: $bg-color;
      box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
      border-radius: 0.04rem;
      font-size: 0.16rem;
      text-align: center;
    }
    &__register__item {
      text-align: center;
      &__link {
        display: inline-block;
        margin: auto 0.05rem auto 0.05rem;
        text-align: center;
        font-size: 0.14rem;
        color: $content-notice-font-color;
      }
    }
  }
</style>
